"use client"; import ConfigureWindow from "@/app/[language]/site/components/ConfigureWindow"; import SiteWindow from "@/app/[language]/site/components/SiteWindow"; import wsAPI from "@/app/[language]/site/lib/wsAPI"; import Loading from "@/app/[language]/site/loading"; import { useSiteStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { useEffect, useMemo } from "react"; import Tab from "react-bootstrap/Tab"; import Tabs from "react-bootstrap/Tabs"; import { Item, Menu, useContextMenu } from "react-contexify"; import Swal from "sweetalert2"; import { useIsPath } from "taehui-ts/fe-utilities"; import SiteYellsView from "./components/SiteYellsView"; const EventPB = require("@/Event_pb"); export default observer(() => { const { targetSiteID, siteViews, siteAvatarID, getSiteView, isLoading, setTargetSiteID, } = useSiteStore(); const t = useTranslations(); const { show: viewSiteNameInput } = useContextMenu({ id: "siteName", }); const isPath = useIsPath(); useEffect(() => { if (isPath("/site")) { getSiteView(targetSiteID)?.siteYellsViewMove(); } }, [getSiteView, isPath, targetSiteID]); useEffect(() => { window.Notification?.requestPermission(); }, []); const isSiteHand = useMemo( () => getSiteView(targetSiteID)?.siteHand === siteAvatarID, [getSiteView, siteAvatarID, targetSiteID], ); if (isLoading) { return <Loading />; } return ( <> <Tabs id="tabsView" activeKey={targetSiteID} onSelect={(eventKey) => { setTargetSiteID(eventKey ?? ""); }} onContextMenu={(event) => { event.preventDefault(); viewSiteNameInput({ event }); }} > {siteViews.map((siteView) => ( <Tab key={siteView.siteID} eventKey={siteView.siteID} title={ siteView.isNew ? `💬 ${siteView.siteName}` : siteView.siteName } > <SiteYellsView siteView={siteView} /> </Tab> ))} </Tabs> <Menu id="siteName"> <Item disabled={!isSiteHand} onClick={async () => { const { isConfirmed, value } = await Swal.fire({ title: t("setSiteNameText"), input: "text", }); if (isConfirmed) { wsAPI.send({ eventID: EventPB.Event.EventID.SET_SITE_NAME, text: JSON.stringify({ siteID: targetSiteID, siteName: value, }), }); } }} > {t("setSiteName")} </Item> </Menu> <ConfigureWindow /> <SiteWindow /> </> ); });